<template>
  <div class="head" v-loading="load">
    <div class="title">
      <span>{{ type === '1' ? '销售合同' : '采购合同' }}信息：</span>
      <div>
        <el-button
          type="primary"
          icon="Upload"
          v-if="!showIf && props.ifEnd === '履行中'"
          @click="openUploadFile()"
        >
          合同上传
        </el-button>
        <el-button
          type="primary"
          icon="Edit"
          v-if="!showIf && props.ifEnd === '履行中'"
          @click="editMode"
          >编辑</el-button
        >
        <el-button
          type="primary"
          icon="CircleClose"
          v-if="showIf && props.ifEnd === '履行中'"
          @click="showIf = false"
        >
          取消编辑
        </el-button>
        <el-button
          type="success"
          icon="CircleCheck"
          v-if="showIf && props.ifEnd === '履行中'"
          @click="submit"
        >
          保存编辑
        </el-button>
      </div>
    </div>
    <el-row :gutter="20" style="margin: 0">
      <el-col :span="16" style="padding: 0">
        <div class="col-content">
          <div class="label-info"
            ><svg-icon icon-class="contact-name" class="icons" />合同名称:</div
          >
          <div class="content-info">
            <el-input
              v-if="showIf"
              style="width: 100%"
              v-model="ruleForm.contractName"
              maxlength="64"
              show-word-limit
            />
            <span v-else>
              {{ baseInfo?.contractName }}
            </span></div
          >
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="date" class="icons" />签订时间:</div>
          <div class="content-info">
            <el-date-picker
              v-if="showIf"
              v-model="ruleForm.contractDate"
              type="date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
            <span v-else>
              {{ baseInfo?.contractDate }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />采购方:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.procurementName"
              :listNum="1"
              :type="1"
              @getValue="
                (data) => {
                  ruleForm.procurementName = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.procurementName }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"
            ><svg-icon icon-class="tax-number" class="icons" />采购方税号:</div
          >
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.procurementNumber"
              :listNum="2"
              :type="1"
              @getValue="
                (data) => {
                  ruleForm.procurementNumber = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.procurementNumber }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="24" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="address" class="icons" />采购方地址:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.procurementAddress"
              :listNum="3"
              :type="1"
              @getValue="
                (data) => {
                  ruleForm.procurementAddress = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.procurementAddress }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />供应方:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.vendorName"
              :listNum="1"
              :type="2"
              @getValue="
                (data) => {
                  ruleForm.vendorName = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.vendorName }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"
            ><svg-icon icon-class="tax-number" class="icons" />供应方税号:</div
          >
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.vendorNumber"
              :listNum="2"
              :type="2"
              @getValue="
                (data) => {
                  ruleForm.vendorNumber = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.vendorNumber }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="24" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="address" class="icons" />供应方地址:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.vendorAddress"
              :listNum="3"
              :type="2"
              @getValue="
                (data) => {
                  ruleForm.vendorAddress = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.vendorAddress }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />第三方:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.thirdName"
              :listNum="1"
              :type="3"
              @getValue="
                (data) => {
                  ruleForm.thirdName = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.thirdName }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"
            ><svg-icon icon-class="tax-number" class="icons" />第三方税号:</div
          >
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.thirdNumber"
              :listNum="2"
              :type="3"
              @getValue="
                (data) => {
                  ruleForm.thirdNumber = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.thirdNumber }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="24" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="address" class="icons" />第三方地址:</div>
          <div class="content-info">
            <MyAutoComplete
              v-if="showIf"
              :data="ruleForm.thirdAddress"
              :listNum="3"
              :type="3"
              @getValue="
                (data) => {
                  ruleForm.thirdAddress = data
                }
              "
              style="width: 100%"
            ></MyAutoComplete>
            <span v-else>
              {{ baseInfo?.thirdAddress }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0" v-if="type === '1'">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />客户:</div>
          <div class="content-info">
            <el-select
              v-if="showIf"
              style="width: 100%"
              v-model="ruleForm.clientId"
              placeholder="请选择客户名称"
              filterable
            >
              <el-option
                v-for="ite in clientList"
                :key="ite.id"
                :label="ite.clientName"
                :value="ite.id"
              />
            </el-select>
            <span v-else>
              {{ baseInfo?.client?.clientName }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0" v-if="type === '0'">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />供应商:</div>
          <div class="content-info">
            <el-select
              v-if="showIf"
              style="width: 100%"
              v-model="ruleForm.supplierId"
              placeholder="请选择供应商"
              filterable
            >
              <el-option
                v-for="ite in supplierList"
                :key="ite.id"
                :label="ite.supplierName"
                :value="ite.id"
              />
            </el-select>
            <span v-else>
              {{ baseInfo?.supplier?.supplierName }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="state" class="icons" />合同状态:</div>
          <div class="content-info">
            {{ baseInfo?.contractState }}
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="money-rmb" class="icons" />合同金额:</div>
          <div class="content-info">
            <el-input-number
              v-if="showIf"
              style="width: 100%"
              v-model="ruleForm.contractAmount"
              :precision="2"
              :min="0"
              :max="500000000"
            />
            <span v-else> {{ numberFormat(baseInfo?.contractAmount) }}&nbsp;元 </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="money-rmb" class="icons" />质保金:</div>
          <div class="content-info">
            <el-input-number
              v-if="showIf"
              style="width: 100%"
              v-model="ruleForm.qualityAmount"
              :precision="2"
              :min="0"
              :max="10000000"
            />
            <span v-else> {{ numberFormat(baseInfo?.qualityAmount) }}&nbsp;元 </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="date" class="icons" />质保到期:</div>
          <div class="content-info">
            <el-date-picker
              v-if="showIf"
              v-model="ruleForm.qualityDate"
              type="date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
            <span v-else>
              {{ baseInfo?.qualityDate }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0" v-if="type === '1'">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="money-rmb" class="icons" />已收金额:</div>
          <div class="content-info"> {{ numberFormat(baseInfo?.receivedAmount) }}&nbsp;元 </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0" v-if="type === '0'">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="money-rmb" class="icons" />已付金额:</div>
          <div class="content-info"> {{ numberFormat(baseInfo?.paidAmount) }}&nbsp;元 </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="money-rmb" class="icons" />已开票金额:</div>
          <div class="content-info"> {{ numberFormat(baseInfo?.ticketAmount) }}&nbsp;元 </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="date" class="icons" />完成时间:</div>
          <div class="content-info">
            {{ baseInfo?.finishTime }}
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="padding: 0">
        <div class="col-content">
          <div class="label-info">
            <svg-icon icon-class="folder" class="files-icon" />合同附件：
          </div>
          <div class="content-info">
            <div class="file-item" v-for="item in baseInfo?.fileList" :key="item">
              <svg-icon icon-class="file" class="files-icon" />
              <span class="link" @click="openFileInfo(item)">
                {{ item.title }}
              </span>
              <el-icon class="delFile" color="#40a9ff" @click="delFile(item)">
                <CircleClose />
              </el-icon>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 0">
        <div class="col-content">
          <div class="label-info"><svg-icon icon-class="light-user" class="icons" />录入人:</div>
          <div class="content-info">
            {{ baseInfo?.createName }}
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <UploadFileDrawer ref="uploadFileDrawer" @getData="emit('getAllData')" />
      <FileInfoDrawer ref="fileInfoDrawer" @getData="emit('getAllData')" />
      <EndDrawer ref="endDrawer" @getData="emit('getAllData')" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import UploadFileDrawer from './components/uploadFileDrawer.vue'
  import FileInfoDrawer from './components/fileInfoDrawer.vue'
  import EndDrawer from './components/endDrawer.vue'
  import MyAutoComplete from './components/myAutoComplete.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { getMarketingContractByContractId } from '@/api/controller/marketing-contract-controller/index'
  import { getProcurementContractByContractId } from '@/api/controller/procurement-contract-controller/index'
  import { putMarketingContract } from '@/api/controller/marketing-contract-controller/index'
  import { putProcurementContract } from '@/api/controller/procurement-contract-controller/index'
  import { postClientMatch } from '@/api/controller/client-controller/index'
  import { postSupplierMatch } from '@/api/controller/supplier-controller/index'
  import { deleteContractFileRemoveById } from '@/api/controller/contract-file-controller/index'

  let props = defineProps({
    ifEnd: {
      type: String,
    },
  })

  const load = ref(true)
  const clientList = ref([])
  const supplierList = ref([])
  const type = ref(history.state?.contractType)
  const contractId = ref(history.state?.contractId)
  const showIf = ref(false)
  const ruleForm = ref<any>({})
  onMounted(async () => {
    type.value = history.state.contractType
    let res
    if (type.value === '1') {
      res = await postClientMatch({})
      clientList.value = res.data
    } else if (type.value === '0') {
      res = await postSupplierMatch({})
      supplierList.value = res.data
    }
  })
  //获取数据
  const baseInfo = ref<any>()
  const getData = async () => {
    try {
      load.value = true
      let res
      if (type.value === '1') {
        res = await getMarketingContractByContractId({
          contractId: contractId.value,
        })
        baseInfo.value = res.data
      } else {
        res = await getProcurementContractByContractId({
          contractId: contractId.value,
        })
        baseInfo.value = res.data
      }
      showIf.value = false
    } finally {
      load.value = false
    }
  }

  //编辑模式
  const editMode = () => {
    ruleForm.value = JSON.parse(JSON.stringify(baseInfo.value))
    showIf.value = true
  }

  //编辑结束提交数据
  const submit = async () => {
    if (type.value === '1') {
      if (
        !ruleForm.value.contractName ||
        !ruleForm.value.contractDate ||
        !ruleForm.value.contractAmount ||
        !ruleForm.value.clientId
      ) {
        ElMessage.warning('合同名称、客户、签订日期、合同金额不能为空')
        return
      }
    } else {
      if (
        !ruleForm.value.contractName ||
        !ruleForm.value.supplierId ||
        !ruleForm.value.contractDate ||
        !ruleForm.value.contractAmount
      ) {
        ElMessage.warning('合同名称、供应商、签订日期、合同金额不能为空')
        return
      }
    }
    let result
    if (type.value === '1') {
      result = await putMarketingContract(ruleForm.value, { loading: true })
    } else {
      result = await putProcurementContract(ruleForm.value, { loading: true })
    }
    if (result.code === 200) {
      await emit('getAllData')
      ElMessage.success('更新成功')
    }
  }

  //打开合同附件上传抽屉
  const uploadFileDrawer = ref()
  const openUploadFile = () => {
    uploadFileDrawer.value.show(contractId.value, type.value)
  }

  //打开合同附件信息抽屉
  const fileInfoDrawer = ref()
  const openFileInfo = (row) => {
    fileInfoDrawer.value.show(row)
  }

  //删除合同附件
  const delFile = (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }).then(async () => {
      let res = await deleteContractFileRemoveById({ id: row.id }, { loading: true })
      if (res.code === 200) {
        await getData()
        ElMessage.success('删除成功')
      }
    })
  }

  //完成合同抽屉
  const endDrawer = ref()
  const openEnd = () => {
    endDrawer.value.show(contractId.value, type.value)
  }
  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
    baseInfo,
    openEnd,
    showIf,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
  .head {
    background-color: white;
    margin: 0 0 16px 0;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  }
  .col-content {
    display: flex;
    height: 100%;
    .label-info {
      display: flex;
      align-items: center;
      justify-content: end;
      color: #606266;
      font-weight: bold;
      font-size: 14px;
      background-color: #f5f7fa;
      min-width: 110px;
      border: 1px solid #ebeef5;
      padding: 10px;
      .icons {
        margin-right: 6px;
        height: 16px;
        width: 16px;
      }
    }
    .content-info {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px;
      border: 1px solid #ebeef5;
      .file-item {
        display: flex;
        align-items: center;
        .link {
          color: #1890ff;
          margin-right: 10px;
          text-decoration: underline;
          background-color: transparent;
          outline: none;
          cursor: pointer;
          transition: color 0.3s;
        }
        .link:hover {
          color: #40a9ff;
        }
        .delFile {
          margin-right: 20px;
          opacity: 0;
          cursor: pointer;
        }
        .files-icon {
          margin-right: 4px;
          width: 18px;
          height: 18px;
        }
      }
      .file-item:hover {
        .delFile {
          opacity: 1;
        }
      }
    }
  }
</style>
